<template>
	<view class="container">
		<view class="device-des" :class="isOpen ? 'open' : ''" :style="{'position': isFixed ? 'fixed' : 'absolute'}">
			<view class="device-des-top" hover-class="clickable" :class="isOpen ? 'des-open' : ''">
				<view class="close-box" v-show="isOpen" @click="closeParam">
					<u-icon name="close" color="#aaa" size="26"></u-icon>
				</view>
				<view class="device-img-box" :class="isOpen ? 'img-open' : ''" @click="openParam">
					<view class="load-txt" v-if="isLoading">加载中...</view>
					<image :src="device.img" mode="" v-else-if="device.img && !isLoading"></image>
					<image src="../../../static/theme/default/no-pic.png" mode="" v-else></image>
				</view>
				<view class="device-param" :class="isOpen ? 'param-open' : ''">
					<table style="width: 100%" v-show="isFixed"> 
						<tr class="tr" v-for="item in param" :key="item.code">
							<td class="td" style="flex: 1;text-align: center;">{{item.name}}</td>
							<td class="td" style="flex: 3;">{{item.value}}</td>
						</tr>
					</table>
				</view>
			</view>
			<view class="device-des-bottom" v-show="!isOpen">
				<view class="" style="flex: 1;border-right: 1rpx solid #eee;">
					<view class="device-des-bottom-item" hover-class="clickable" @click="goDetail('wx')">
						<view class="device-des-bottom-item-icon">
							<image src="../../../static/theme/default/home/wxjl.png" mode=""></image>
						</view>
						<view class="">维修</view>
					</view>
					<view class="device-des-bottom-item" hover-class="clickable" @click="goDetail('by')">
						<view class="device-des-bottom-item-icon">
							<image src="../../../static/theme/default/home/byjl.png" mode=""></image>
						</view>
						<view class="">保养</view>
					</view>
				</view>
				<view class="" style="flex: 1;">
					<view class="device-des-bottom-item" hover-class="clickable"  @click="goDetail('bj')">
						<view class="device-des-bottom-item-icon">
							<image src="../../../static/theme/default/home/bpbj.png" mode=""></image>
						</view>
						<view class="">备品备件</view>
					</view>
					<view class="device-des-bottom-item" hover-class="clickable"  @click="goHistory">
						<view class="device-des-bottom-item-icon">
							<image src="../../../static/theme/default/home/yxjl.png" mode=""></image>
						</view>
						<view class="">运行记录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cnl-box">
			<view class="cnl-item" v-for="item in cnls" :key="item.CnlCode" @click.stop="goPage(item)">
				<view class="cnl-item-left">
					<view class="" style="font-weight: bold;">{{item.Name}}</view>
					<view class="">{{item.CnlCode}}</view>
				</view>
				<view class="cnl-item-right">
					<view class="">
						<view class="cnl-value"  v-if="item.Type != 1">{{item.Val}} {{item.Unit != '无' ? item.Unit : ''}}</view>
						<view class="cnl-value" v-else>
							<image src="../../../static/theme/default/home/jihuo.png" mode="" v-if="item.Val == 1"></image>
							<image src="../../../static/theme/default/home/weijihuo.png" mode="" v-if="item.Val == 0"></image>
						</view>
						
						<view class="cnl-item-icon">
							<image src="../../../static/theme/default/home/yujing.png" mode="" v-if="item.Stat != '13' && item.Stat != ''"></image>
						</view>
						<view class="" style="clear: both;"></view>
					</view>
					<view class="">{{item.DateTime}}</view>
				</view>
				<view class="focus">
					<image class="focus-icon" src="../../../static/theme/default/home/focus_1.png" alt="" v-if="!item.focus" @click.stop="focusCnl(item)"/>
					<image class="focus-icon" :class="['animated',(item.focusAnimate ? 'tada' : '')]" src="../../../static/theme/default/home/focus_2.png" alt="" v-else @click.stop="unFocusCnl(item)"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import {getTableSuffix,formatImg,setDotNumber} from '@/common/custom_util.js'
	
	export default {
		components: {
			
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				cnls: [],
				device: {},
				obsusername: _data.localData('name'),
				isOpen: false,
				isFixed: false,
				isLoading: true,
				param: [
					{
						name: '部位',
						code: 'buwei',
						value: ''
					},
					{
						name: '设备位号',
						code: 'aname',
						value: ''
					},
					{
						name: '厂家编号',
						code: 'cjCode',
						value: ''
					},
					{
						name: '出厂型号',
						code: 'ccCode',
						value: ''
					},
					{
						name: '品牌',
						code: 'pinpai',
						value: ''
					},
					{
						name: '流量',
						code: 'liliang',
						value: ''
					},
					{
						name: '扬程',
						code: 'yangchen',
						value: ''
					},
					{
						name: '转速',
						code: 'zhuansu',
						value: ''
					},
					{
						name: '电机功率',
						code: 'dianjiPn',
						value: ''
					},
					{
						name: '额定电压',
						code: 'dianya',
						value: ''
					},
					{
						name: '额定电流',
						code: 'dianliu',
						value: ''
					},
					{
						name: '电机转速',
						code: 'dianjizhuansu',
						value: ''
					},
					{
						name: '连接方式',
						code: 'lianjiefangshi',
						value: ''
					},
					{
						name: '连接尺寸',
						code: 'lianjiechicun',
						value: ''
					},
					{
						name: '压力等级',
						code: 'yalidengji',
						value: ''
					},
					{
						name: '重量',
						code: 'zhongliang',
						value: ''
					},
					{
						name: '数量',
						code: 'anum',
						value: ''
					},
					{
						name: '附属配件',
						code: 'fushupeijian',
						value: ''
					},
					{
						name: '出厂日期',
						code: 'chuchangriqi',
						value: ''
					},
					{
						name: '使用日期',
						code: 'shiyongriqi',
						value: ''
					},
					{
						name: '备注1',
						code: 'bz1',
						value: ''
					},
					{
						name: '备注2',
						code: 'bz2',
						value: ''
					},
					{
						name: '备注3',
						code: 'bz3',
						value: ''
					}
				]
			}
		},
		mounted() {
			this.getDeviceDetail()
		},
		methods: {
			formatDevice() {
				try {
					this.device.img = formatImg(this.device.savename)
				} catch(e) {}
				let temp = []
				Object.keys(this.device).forEach(item => {
					let obj = {}
					obj[item] = this.device[item]
					temp.push(obj)
				})
				temp.forEach(item => {
					this.param.forEach(v => {
						if(Object.keys(item)[0] == v.code) {
							v.value = item[Object.keys(item)[0]]
						}
					})
				})
				uni.setNavigationBarTitle({
					title: this.device.name
				})
				this.getCnlList()
			},
			getDeviceImages() {
				let that = this
				_custom.getDataJava({
					apiname: 'getDeviceImages',
					apiparam: {
						devicecode: this.data.devicecode,
					},
					success(res) {
						that.device.img = res.length ? formatImg(res[0].savename) : ''
						that.isLoading = false
					},
					fail() {
						that.isLoading = true;
					}
				})
			},
			getDeviceDetail() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDeviceDetail',
					apiparam: {
						devicecode: this.data.devicecode,
						device: this.data.device,
					},
					success(res) {
						if(res.length) {
							that.device = res[0]
							that.formatDevice()
							that.getDeviceImages()
						}
					}
				})
			},
			getCnlList() {
				let that = this;
				if(this.device.aname) {
					_custom.getDataJava({
						apiname: 'getDeviceCnlList',
						apiparam: {
							devicecode: this.device.aname,
							tablesuffix: getTableSuffix()
						},
						success(res) {
							res.forEach((item,index) => {
								that.$set(res[index],'focus',false)
								if(item.Type == '0') {
									item.Val = setDotNumber(item.Val)
								}
							})
							that.getFocusCnlList((v) => {
								res.forEach((item,index) => {
									v.forEach(f => {
										if(item.CnlCode == f.CnlCode) {
											that.$set(res[index],'focus',true)
										}
									})
								})
							})
							that.cnls = res
						}
					})
				} else {
					uni.showToast({
						title: '设备不存在',
						icon:'none'
					})
				}
			},
			getFocusCnlList(callback) {
				_custom.getDataJava({
					apiname: 'getFollowCnlCodeInDevice',
					apiparam: {
						devicecode: this.device.aname,
						obsusername: this.obsusername
					},
					success(res) {
						callback(res)
					}
				})
			},
			focusCnl(v) {
				_custom.getDataJava({
					apiname: 'addFollowCnlCode',
					code: 3,
					apiparam: {
						devicecode: this.device.aname,
						cnlnum: v.CnlNum,
						cnlcode: v.CnlCode,
						cnlcodesuffix: v.CnlCodeSuffix,
						obsusername: this.obsusername,
					},
					success(res) {
						v.focus = true;
						v.focusAnimate = true;
						uni.showToast({
							title: '关注成功!',
							icon: 'none',
						})
					}
				})
			},
			unFocusCnl(v) {
				_custom.getDataJava({
					apiname: 'delFollowCnlCode',
					code: 4,
					apiparam: {
						cnlcode: v.CnlCode,
						obsusername: this.obsusername,
					},
					success(res) {
						v.focus = false;
						uni.showToast({
							title: '取消关注成功!',
							icon: 'none'
						})
					}
				})
			},
			goDetail(v) {
				let data = {
					id: v,
					device: this.device
				}
				uni.navigateTo({
					url: '/pages/home/child/equipment/device_detail?data=' + JSON.stringify(data)
				})
			},
			goHistory() {
				uni.navigateTo({
					url: '/pages/home/child/equipment/history?data=' + JSON.stringify(this.device)
				})
			},
			openParam() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.isOpen = true
				setTimeout(() => {
					this.isFixed = true
				},600)
			},
			closeParam() {
				this.isOpen = false
				this.isFixed = false
				// setTimeout(() => {
				// 	this.isFixed = false
				// },600)
			},
			goPage(v) {
				v.DeviceCode = this.data.devicecode
				v.Device = this.data.device
				v.buwei = this.device.buwei
				v.DeviceName = this.device.name
				uni.navigateTo({
					url: '/pages/home/child/equipment/cnl?data=' + JSON.stringify(v)
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100%;
		position: relative;
		padding-top: 770rpx;
		padding-bottom: 20rpx;
	}
	
	.device-des {
		width: 650rpx;
		height: 750rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, .1);
		position: absolute;
		top: 20rpx;
		left: 50rpx;
		z-index: 99999;
		transition: all .6s ease-in-out;
		transform-origin: 50% 50% 0;
	}
	
	.device-des-top {
		height: 600rpx;
		position: relative;
		transition: all .6s ease-in-out;
		z-index: 99999;
	}
	
	.close-box {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		z-index: 99999999;
	}
	
	.device-img-box {
		height: 600rpx;
		transition: all .3s ease;
	}
	
	.device-img-box > image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.load-txt {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #aaa;
		font-size: 30rpx;
	}
	
	.no-img {
		width: 100%;
		height: 100%;
		background-color: #d8d8d8;
	}
	
	.device-param {
		position: absolute;
		bottom: 0;
		/* background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.7)); */
		width: 100%;
		line-height: 100rpx;
		padding: 10rpx;
		font-weight: bold;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tr {
		width: 100%;
		display: flex;
	}
	
	.td {
		padding: 20rpx;
		border: 1rpx solid #eee;
	}
	
	.open {
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
	}
	
	.des-open {
		height: 100%;
	}
	
	.img-open {
		width: 100%;
		height: 600rpx;
		padding: 20rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}
	
	.param-open {
		height: calc(100% - 600rpx);
		background-color: #fff;
		overflow-y: scroll;
	}

	.device-des-bottom {
		height: 150rpx;
		display: flex;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 -2rpx 60rpx 2rpx rgba(0, 0, 0, .1);
	}
	
	.device-des-bottom-item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.device-des-bottom-item-icon > image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.device-des-bottom-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
	}
	
	.cnl-item {
		height: 100rpx;
		padding: 20rpx;
		background-color: #fff;
		position: relative;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 50rpx 3rpx rgba(0, 0, 0, .1);
	}
	
	.cnl-item-icon {
		text-align: right;
		float: right;
		margin-right: 20rpx;
	}
	
	.cnl-item-icon > image {
		width: 45rpx;
		height: 45rpx;
	}
	
	.cnl-item-left {
		float: left;
	}
	
	.cnl-item-right {
		float: right;
		margin-right: 80rpx;
		text-align: right;
	}
	
	.cnl-value {
		float: right;
		font-size: 30rpx;
		font-weight: bold;
		color: #5BCFF6;
	}
	
	.cnl-value > image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.focus {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20rpx;
		z-index: 9999;
		width: 40rpx;
		height: 40rpx;
	}
	
	.focus-icon {
		width: 100%;
		height: 100%;
	}
</style>
